var data2 = [
    { number: 1, transhipment: "批量转运", name: '系统', time: '2020-11-11', operate: '1' },
    { number: 2, transhipment: "批量转运", name: '张三', time: '2020-11-11', operate: '1' },
    { number: 3, transhipment: "单独转运", name: '李四', time: '2020-11-11', operate: '1' },
    { number: 4, transhipment: "批量转运", name: '王五', time: '2020-11-11', operate: '1' },
    { number: 5, transhipment: "单独转运", name: '系统', time: '2020-11-11', operate: '1' },
    { number: 6, transhipment: "单独转运", name: '王五', time: '2020-11-10', operate: '1' },
    { number: 7, transhipment: "批量转运", name: '李四', time: '2020-11-10', operate: '1' },
    { number: 8, transhipment: "批量转运", name: '张三', time: '2020-11-10', operate: '1' },
    { number: 9, transhipment: "单独转运", name: '王五', time: '2020-11-10', operate: '1' },
    { number: 10, transhipment: "批量转运", name: '李四', time: '2020-11-10', operate: '1' },
    { number: 11, transhipment: "单独转运", name: '系统', time: '2020-11-9', operate: '1' },
    { number: 12, transhipment: "批量转运", name: '张三', time: '2020-11-9', operate: '1' },
    { number: 13, transhipment: "单独转运", name: '王五', time: '2020-11-9', operate: '1' },
    { number: 14, transhipment: "批量转运", name: '李四', time: '2020-11-9', operate: '1' },
    { number: 15, transhipment: "单独转运", name: '王五', time: '2020-11-9', operate: '1' },
    { number: 16, transhipment: "单独转运", name: '张三', time: '2020-11-8', operate: '1' },
];

var data3 = [
    { number: 1, contact: "呼吸道传播", name: '丁一', time: '2020-11-11', operate: '1' },
    { number: 2, contact: "密切接触传播", name: '丁二', time: '2020-11-11', operate: '1' },
    { number: 3, contact: "呼吸道传播", name: '丁四', time: '2020-11-11', operate: '1' },
    { number: 4, contact: "密切接触传播", name: '丁五', time: '2020-11-11', operate: '1' },
    { number: 5, contact: "呼吸道传播", name: '丁六', time: '2020-11-11', operate: '1' },
    { number: 6, contact: "呼吸道传播", name: '丁七', time: '2020-11-10', operate: '1' },
    { number: 7, contact: "呼吸道传播", name: '丁八', time: '2020-11-10', operate: '1' },
    { number: 8, contact: "密切接触传播", name: '丁九', time: '2020-11-10', operate: '1' },
    { number: 9, contact: "密切接触传播", name: '丁十', time: '2020-11-10', operate: '1' },
    { number: 10, contact: "呼吸道传播", name: '刘一', time: '2020-11-10', operate: '1' },
    { number: 11, contact: "密切接触传播", name: '刘二', time: '2020-11-9', operate: '1' },
    { number: 12, contact: "呼吸道传播", name: '刘三', time: '2020-11-9', operate: '1' },
    { number: 13, contact: "呼吸道传播", name: '刘五', time: '2020-11-9', operate: '1' },
    { number: 14, contact: "密切接触传播", name: '刘四', time: '2020-11-9', operate: '1' },
    { number: 15, contact: "密切接触传播", name: '刘六', time: '2020-11-9', operate: '1' },
    { number: 16, contact: "呼吸道传播", name: '刘七', time: '2020-11-8', operate: '1' },
];


var pag2 = 1;//当前的页码
var coun2 = 6;//每页的条数

var pag3 = 1;
var coun3 = 6;

var oTBod2 = document.querySelector('tbody');//获取tbody
var oTBod3 = document.querySelector('.tbody2');

var OPagination2 = document.querySelector('.pagination');//获取分页容器
var OPagination3 = document.querySelector('#pagination2');

var sYy2 = document.querySelector('.prev');//获取上一页的按钮
var xYy2 = document.querySelector('.next');//获取下一页的按钮

var sYy3 = document.querySelector('#prev2');
var xYy3 = document.querySelector('#next2');

var obaoCun = document.querySelector('.baoCun')//获取修改的保存
var otianJia = document.querySelector('.tianJia')//获取添加的保存按钮

var obaoCun2 = document.querySelector('.baoCun')//获取修改的保存
var otianJia2 = document.querySelector('.tianJia2')//获取添加的保存按钮

var oxiuGai = document.querySelector('.xiuGai')//获取修改的保存
var oxiuGai2 = document.querySelector('.xiuGai2')//获取修改的保存

var act1 = document.querySelector('.act1');//显示和隐藏
var act2 = document.querySelector('.act2');
var diYi1 = document.querySelector('#diYi1');
var diYi2 = document.querySelector('#diYi2');
var nav2 = document.querySelector('#nav2');//页码
var nav3 = document.querySelector('#nav3');//页码


act2.addEventListener('click', xsNeiRong1);//点击右边选项时
function xsNeiRong1() {
    act1.classList.remove('active');
    act2.classList.add('active');
    diYi1.style.display = 'none';
    nav2.style.display = 'none';
    nav3.style.display = 'block';
    diYi2.style.display = 'block';
}

act1.addEventListener('click', xsNeiRong2);//点击左边选项时
function xsNeiRong2() {
    act2.classList.remove('active');
    act1.classList.add('active');
    diYi1.style.display = 'block';
    nav2.style.display = 'block';
    nav3.style.display = 'none';
    diYi2.style.display = 'none';
}



// 左边选项的渲染
function reader2() {
    oTBod2.innerHTML = '';//让table为空
    var reader2Arr = data2.slice((pag2 - 1) * coun2, pag2 * coun2);//根据count和page准备要渲染的数据
    for (var i = 0; i < reader2Arr.length; i++) {  //循环要渲染的数据
        var oTr2 = document.createElement('tr');//创建tr
        //给tr创建内容
        oTr2.innerHTML = `
        <td>${reader2Arr[i].number}</td>
        <td>${reader2Arr[i].transhipment}</td>
        <td>${reader2Arr[i].name}</td>
        <td>${reader2Arr[i].time}</td>
        <td>
            <button class="btn btn-primary bji" id="bj2">编辑</button>
            <button class="btn btn-danger dil" id="bj2">删除</button>
        </td>
        `;
        oTBod2.appendChild(oTr2); //把tr创建到tbody里面
    }
    var apBtn2 = document.querySelectorAll('.pBtn2'); //渲染页码  找到所有的1，2，3，4的页码
    for (var i = 0; i < apBtn2.length; i++) { //删除所有的页码
        OPagination2.removeChild(apBtn2[i].parentNode);
    }
    for (var i = 1; i <= Math.ceil(data2.length / coun2); i++) {  //根据数据的长度重新创建页码
        var oli2 = document.createElement('li');//创建li
        oli2.innerHTML = `<a class="pBtn2" href="#">${i}</a>`; //给li创建内容
        if (i == pag2) { //如果li和当前的页码一致，给他加一个选中的class
            oli2.classList.add('active');
        }
        OPagination2.insertBefore(oli2, OPagination2.lastElementChild);//在下一页的前面插入页码
    }
}
reader2();//一上来就渲染一次数据

// 右边选项的渲染
function reader3() {
    oTBod3.innerHTML = '';
    var reader3Arr = data3.slice((pag3 - 1) * coun3, pag3 * coun3);
    for (var i = 0; i < reader3Arr.length; i++) {
        var oTr3 = document.createElement('tr');
        oTr3.innerHTML = `
        <td>${reader3Arr[i].number}</td>
        <td>${reader3Arr[i].contact}</td>
        <td>${reader3Arr[i].name}</td>
        <td>${reader3Arr[i].time}</td>
        <td>
            <button class="btn btn-primary bji2" id="bj2">编辑</button>
            <button class="btn btn-danger dil2" id="bj2">删除</button>
        </td>
        `;
        oTBod3.appendChild(oTr3);
    }
    var apBtn3 = document.querySelectorAll('.pBtn3');
    for (var i = 0; i < apBtn3.length; i++) {
        OPagination3.removeChild(apBtn3[i].parentNode);
    }
    for (var i = 1; i <= Math.ceil(data3.length / coun3); i++) {
        var oli3 = document.createElement('li');
        oli3.innerHTML = `<a class="pBtn3" href="#">${i}</a>`;
        if (i == pag3) {
            oli3.classList.add('active');
        }
        OPagination3.insertBefore(oli3, OPagination3.lastElementChild);
    }
}
reader3();


//给分页加事件
OPagination2.addEventListener('click', changePg2);
function changePg2() {
    if (event.target.className == 'pBtn2') { //如果当前点击的按钮有pageBtn这个class名字
        pag2 = event.target.innerHTML; //修改全局的page
        reader2();//渲染table，渲染分页
    }
}

OPagination3.addEventListener('click', changePg3);
function changePg3() {
    if (event.target.className == 'pBtn3') {
        pag3 = event.target.innerHTML;
        reader3();
    }
}


//给上一页和下一页加事件  1
sYy2.addEventListener('click', prev2);
xYy2.addEventListener('click', next2);
function prev2() {
    if (pag2 > 1) {
        pag2--;
        reader2();
    }
}
function next2() {
    if (pag2 < Math.ceil(data2.length / coun2)) {
        pag2++;
        reader2();
    }
}

//给上一页和下一页加事件  2
sYy3.addEventListener('click', prev3);
xYy3.addEventListener('click', next3);
function prev3() {
    if (pag3 > 1) {
        pag3--;
        reader3();
    }
}
function next3() {
    if (pag3 < Math.ceil(data3.length / coun3)) {
        pag3++;
        reader3();
    }
}


//删除功能 1
oTBod2.addEventListener('click', dil);
function dil() {
    if (event.target.className.includes('dil')) {
        var number = event.target.parentNode.parentNode.children[0].innerText;
        for (var i = 0; i < data2.length; i++) {
            if (data2[i].number == number) {
                data2.splice(i, 1);
            }
        }
        reader2();
    }
}

//删除功能 2
oTBod3.addEventListener('click', dil2);
function dil2() {
    if (event.target.className.includes('dil2')) {
        var number = event.target.parentNode.parentNode.children[0].innerText;
        for (var i = 0; i < data3.length; i++) {
            if (data3[i].number == number) {
                data3.splice(i, 1);
            }
        }
        reader3();
    }
}


//添加 1
otianJia.addEventListener('click', tj);
function tj() {
    var addNumber = document.querySelector('.addNumber').value;
    var addName = document.querySelector('.addName').value;
    var addTime = document.querySelector('.addTime').value;
    var addTranshipment = document.querySelector('#inlineRadio1').checked ? '批量转运' : '单独转运';
    data2.push({
        number: addNumber,
        name: addName,
        time: addTime,
        transhipment: addTranshipment
    })
    reader2();
    $('#tjModal').modal('hide')//让模态框隐藏
}

//添加 2
otianJia2.addEventListener('click', tj2);
function tj2() {
    var addNumber2 = document.querySelector('.addNumber2').value;
    var addName2 = document.querySelector('.addName2').value;
    var addTime2 = document.querySelector('.addTime2').value;
    var addContact = document.querySelector('#inlineRadio3').checked ? '密切接触传播' : '呼吸道传播';
    data3.push({
        number: addNumber2,
        name: addName2,
        time: addTime2,
        contact: addContact
    })
    reader3();
    $('#tjModal2').modal('hide')//让模态框隐藏
}


//给所有的编辑按钮加事件 1
oTBod2.addEventListener('click', openbj);
function openbj() {
    if (event.target.className.includes('bji')) {
        $('#xgModal').modal('show');
        var number = event.target.parentNode.parentNode.children[0].innerText;
        for (var i = 0; i < data2.length; i++) {
            if (data2[i].number == number) {
                document.querySelector('.xgNumber').value = data2[i].number;
                document.querySelector('.xgName').value = data2[i].name;
                if (data2[i].transhipment == '单独转运') {
                    document.querySelector('#xgRadio2').checked = true;
                }
                document.querySelector('.xgTime').value = data2[i].time;
            }
        }
    }
}

//给所有的编辑按钮加事件 2
oTBod3.addEventListener('click',openbj2);
function openbj2() {
    if (event.target.className.includes('bji2')) {
        $('#xgModal2').modal('show');
        var number=event.target.parentNode.parentNode.children[0].innerText;
        for (var i = 0; i < data3.length; i++) {
            if (data3[i].number==number) {
                document.querySelector('.xgNumber2').value = data3[i].number;
                document.querySelector('.xgName2').value = data3[i].name;
                if (data3[i].contact == '呼吸道传播') {
                    document.querySelector('#xgRadio4').checked = true;
                }
                document.querySelector('.xgTime2').value = data3[i].time;
            }

        }
    }
}


//点击修改保存 1
oxiuGai.addEventListener('click', xiuG);
function xiuG() {
    var number = document.querySelector('.xgNumber').value;
    for (var i = 0; i < data2.length; i++) {
        if (data2[i].number == number) {
            data2[i].name = document.querySelector('.xgName').value;
            data2[i].time = document.querySelector('.xgTime').value;
            data2[i].transhipment = document.querySelector('#xgRadio1').checked ? '批量转运' : '单独转运';
        }
    }
    //关闭弹框
    $('#xgModal').modal('hide');
    //重新渲染
    reader2();
}

 //点击修改保存2
oxiuGai2.addEventListener('click',xiuG2);
function xiuG2() {
    var number=document.querySelector('.xgNumber2').value;
    for (var i = 0; i < data3.length; i++) {
        if (data3[i].number==number) {
            data3[i].name = document.querySelector('.xgName2').value;
            data3[i].time = document.querySelector('.xgTime2').value;
            data3[i].contact = document.querySelector('#xgRadio3').checked ? '密切接触传播' : '呼吸道传播';
        }
    }
     //关闭弹框
     $('#xgModal2').modal('hide');
    //重新渲染
    reader3();
}
